<template>
  <div class="account-management">
   <!--  <el-button type="primary" @click="exportFileFn">导出</el-button> -->
    <div class="am-header">
      <div class="fromItem">
        <span>
          名称:
        </span>
        <el-input
        class="inp"
        placeholder="请输入内容"
        v-model="inpName"
        clearable>
        </el-input>  
      </div>
      <div class="fromItem fromItem1">
        <span>
          查询时间:
        </span>
        <el-date-picker
        class="inp1"
        v-model="value1"
         @change="pickTime"
        type="daterange"
        format="yyyy-MM-dd"
        range-separator="至"
        start-placeholder="开始日期"
        value-format="yyyy-MM-dd"
        end-placeholder="结束日期">
        </el-date-picker>
      </div>
      <el-button type="primary" @click="search">搜索</el-button>
      <el-button type="primary" :loading="updataLoading" @click="exportFileFn">导出</el-button>
    </div>
    <!-- 表格 -->
    <div class="am-main">
        <el-table
          :data="tableData"
          stripe
          v-loading="loading2"
          element-loading-text="拼命加载中"
          element-loading-spinner="el-icon-loading"
          show-summary
          :summary-method="getSummaries"
          style="width: 100%">
          <el-table-column
            prop="id"
            label="贷超ID"
            slot="empty"
            align="center">
          </el-table-column>
          <el-table-column
            prop="name"
            label="贷超名称"
            align="center">
          </el-table-column>
          <el-table-column
            align="center"
            label="贷超图标">
            <template slot-scope="scope">
              <img style="width:35px;height:35px;" :src="scope.row.icon" alt="">
            </template>
          </el-table-column>
          <el-table-column
            prop="numbers"
            align="center"
            label="点击人数">
          </el-table-column>
          <el-table-column
            prop="times"
            align="center"
            label="点击次数">
          </el-table-column>
        </el-table>
        <el-pagination
          background
          v-show="!loading2"
          class="elpage"
          @current-change="handleCurrentChange"
          :current-page="currentPage4"
          layout="total, prev, pager, next, jumper"
          :total="totalCount">
        </el-pagination>
    </div>
    <el-dialog
      title="添加账号"
      :visible.sync="dialogVisible"
      width="30%">
      <div class="add">
        <el-input v-model="addAccount" clearable placeholder="请输入账号"><template slot="prepend">账号</template></el-input>
        <el-input v-model="addName" clearable placeholder="请输入姓名"><template slot="prepend">姓名</template></el-input>
        <el-input v-model="addPhone" clearable placeholder="请输入手机号"><template slot="prepend">手机号</template></el-input>
        <div class="datapic">
            <span class="dataspan">创建时间</span>
            <el-date-picker
              v-model="addTime"
              type="date"
              placeholder="选择时间"
              format="yyyy 年 MM 月 dd 日"
              value-format="yyyy-MM-dd">
              <template slot="prepend">创建时间</template>
            </el-date-picker>
        </div>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="addCancelFn">取 消</el-button>
        <el-button type="primary" @click="addSubmitFn" :loading="isAddSubmit">确 定</el-button>
      </span>
    </el-dialog>

    <el-dialog
      title="编辑账号"
      :visible.sync="dialogVisible2"
      width="30%">
      <div class="add">
        <el-input v-model="editAccount" clearable placeholder="请输入账号"><template slot="prepend">账号</template></el-input>
        <el-input v-model="editName" clearable placeholder="请输入姓名"><template slot="prepend">姓名</template></el-input>
        <el-input v-model="editPhone" clearable placeholder="请输入手机号"><template slot="prepend">手机号</template></el-input>
        <div class="datapic">
            <span class="dataspan">创建时间</span>
            <el-date-picker
              v-model="editTime"
              type="date"
              placeholder="选择时间"
              format="yyyy 年 MM 月 dd 日"
              value-format="yyyy-MM-dd">
              <template slot="prepend">创建时间</template>
            </el-date-picker>
        </div>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible2 = false">取 消</el-button>
        <el-button type="primary" @click="dialogVisible2 = false">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import img_404 from '@/assets/404_images/404.png'
import img_404_cloud from '@/assets/404_images/404_cloud.png'
//import {statistics} from '@/api/table.js'
import { dashBoardApi } from '@/api/table'
import { mapGetters } from 'vuex'
export default {
  name: 'accountManagement',
  data() {
    return {
        dialogVisible:false,
        dialogVisible2:false,
        isAddSubmit:false,
        tableData: [],
        currentPage4:1,
        addAccount:"",
        addName:"",
        addPhone:"",
        addTime:"",
        editAccount:"",
        editName:"",
        editPhone:"",
        editTime:"",
        value1:"",
        inpName:"",
        pageIndex:1,
        pageSize:10,
        datetime:"",
        totalCount:null,
        summaryArr:[],
        lendTimeFrom:"",
        lendTimeTo:"",
        datetime1:"",
        loading2:false,
        updataLoading:false,
    }
  },
  computed: {
    ...mapGetters([
      'needLogin'
    ]),
  },
  methods:{
    handleClose(done) {
      console.log(done)
    },
     handleClose2(done){

    },
    handleCurrentChange(val){
      console.log(`当前页: ${val}`);
      this.pageIndex=val
      this.init()
    },
    pickTime(data){
        console.log(data)
        if(data){
          this.lendTimeFrom=data[0]
          this.lendTimeTo=data[1]
        }else{
          this.lendTimeFrom=""
          this.lendTimeTo=""
        }
        
    },
    //添加账号确定提交
    addSubmitFn(){
      this.dialogVisible = false;
    },
    //添加账号取消
    addCancelFn(){
      this.dialogVisible = false;
      this.addAccount="";
      this.addName="";
      this.addPhone="";
      this.addTime="";
    },
    //编辑
    editClick(item){
      this.dialogVisible2=true;
      this.editAccount="";
      this.editName="";
      this.editPhone="";
      this.editTime="";
    },
    //搜索
    search(){
      if((new Date().getTime())-(this.datetime1)>1000){
            this.init()   
      }else{
        this.$message({
          message: '您的操作太频繁了,请控制住自己！',
          type: 'warning'
        });
      }
      
    },
    //删除
    deleteClick(item){
      this.$confirm('此操作将删除该条信息, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          //成功函数
        }).catch(() => {
          //失败函数      
        });
    },
    getSummaries(){
      return this.summaryArr;
    },
    init(){
      let msg = {
        pageIndex:this.pageIndex,
        pageSize:this.pageSize,
        productName:this.inpName,
        startTime:this.lendTimeFrom,
        endTime:this.lendTimeTo,
      }
        this.summaryArr=[];
        this.loading2=true
        dashBoardApi.statistics(msg)
        .then(result=>{
           console.log(result)
           this.tableData=result.records
           this.totalCount=result.totalCount
           this.currentPage4=result.pageNum
           this.loading2=false
           this.summaryArr=["总计","--",result.totalClickNumbers,result.totalClickTimes];
           this.datetime1=new Date().getTime();
           console.log(this.summaryArr)
        })
        .catch(error => {
            console.error(error)
            this.loading2=false
        })
    },
    exportFileFn(){
      let msg = {
        pageIndex:this.pageIndex,
        pageSize:this.pageSize,
        productName:this.inpName,
        startTime:this.lendTimeFrom,
        endTime:this.lendTimeTo,
      }

        if((new Date().getTime())-(this.datetime)>1000){
          this.updataLoading=true
            dashBoardApi.exportFile(msg)
            .then(result=>{
               console.log(result)
               //console.log(window.location.href)
               this.updataLoading=false
               this.datetime=new Date().getTime();
               window.location.href=result.downloadUrl
               //alert(window.location.href)
            })
            .catch(error => {
                console.error(error)
                this.updataLoading=false
            })    
        }else{
          this.$message({
            message: '您的操作太频繁了,请控制住自己！',
            type: 'warning'
          });
        }
        
    },
  },
  created(){
      this.init()
      if(this.needLogin){
        //window.localStorage.removeItem("token")
          //this.$router.replace({ path: '/login' })
      }
  },
}
</script>
<style>
  .account-management .el-input-group__append, .el-input-group__prepend{
    padding: 0;
    width: 70px;
    text-align: center;
  }
  .account-management .datapic .el-input__inner{
      border-top-left-radius: 0;
      border-bottom-left-radius: 0;
    }
   .account-management .datapic .el-date-editor.el-input{
      width: 305px;
    }
    .account-management .el-date-editor--daterange.el-input__inner{
      width: 280px;
    }
    .account-management .el-range-editor .el-range-input{
      margin-left: 12px;
    }
    .account-management .el-table{
       min-height: 766px;
   }
</style>
<style rel="stylesheet/scss" lang="scss" scoped>
  /* .add{
    text-align: center;
  } */
  .add .el-input-group{
    width: 70%;
    margin-left:20px;
    margin-bottom: 20px;
  }
  .dataspan{
    width:70px;
    float: left;
    line-height: 38px;
    border: 1px solid #dcdfe6;
    background-color: #f5f7fa;
    text-align: center;
    color: #909399;
    border-right: 0;
    border-radius: 4px;
    -webkit-border-radius:4px;
    -moz-border-radius:4px;
    -webkit-box-sizing: inherit;
       -moz-box-sizing: inherit;
            box-sizing: inherit;
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
    display: table-cell;
  }
  .datapic{
    width: 71%;
    margin-left:20px;
    height:40px;
  }
  .am-header{
    margin:20px;
    min-width:800px;
  }
  .elpage{
    margin:20px;
    float: right;
  }
  .fromItem{
    color:#606266;
    font-size: 16px;
    width: 254px;
    float: left;
  }
  .inp{
    margin-left: 10px;
    width:200px;
  }
  .fromItem1{
    width: 378px;
    margin-left:10px;
  }
  .inp1{
    margin-left: 10px;
  }
</style>
